import React, { useEffect, useState } from 'react';
import axios from 'axios'
import Item from '../component/item'
const Index = () => {
    const [music,setMusic] = useState([]);
    const HttpData=async ()=>{
        var res =await axios.get("http://122.112.161.135:3000/top/playlist");
        setMusic(res.data.playlists)
    }
    useEffect(()=>{
        HttpData()
    },[])
    return (
        <div className="item">
            {music.map(item=>{
                return(
                    <div  key={item.id}>
                        <div >
                        <Item musicImg={<div><img className="img" src={item.coverImgUrl} alt="" /></div>} data={item}>
                        </Item>
                        </div>
                    </div>
                )
            })}
        </div>
    );
}

export default Index;
